<template>
  <div class="app-container">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="medium"
    >
      <el-form-item>
        <!-- 1华北地区2华南地区 3西南地区 4西北地区 5东北地区 -->
        <el-select
          multiple
          v-model="formInline.districtIds"
          placeholder="请选择大区名字"
        >
          <el-option label="华北地区" value="1"></el-option>
          <el-option label="华南地区" value="2"></el-option>
          <el-option label="西南地区" value="3"></el-option>
          <el-option label="西北地区" value="4"></el-option>
          <el-option label="东北地区" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="formInline.beginTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          value-format="yyyy-MM-dd"
          v-model="formInline.endTime"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="onExport">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      align="left"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change="changeTableSort"
    >
      <el-table-column align="left" type="index" label="序号" width="70">
      </el-table-column>
      <el-table-column
        align="left"
        prop="ranking"
        :sortable="'custom'"
        label="排名"
      >
      </el-table-column>
      <el-table-column align="left" prop="district" label="大区">
      </el-table-column>
      <el-table-column align="left" prop="enterpriseName" label="油企">
      </el-table-column>
      <el-table-column align="left" prop="stationName" label="油站">
      </el-table-column>
      <el-table-column align="left" prop="salesVolume" label="销售额">
      </el-table-column>
      <el-table-column align="left" prop="quantity" label="数量">
      </el-table-column>
      <el-table-column align="left" prop="orderNumber" label="订单笔数">
      </el-table-column>
      <el-table-column
        align="left"
        prop="districtPeopleNumber"
        label="大区人数"
      >
      </el-table-column>
      <el-table-column align="left" label="消费时间">
        <template slot-scope="scope">
          {{
            `${scope.row.beginTime ? scope.row.beginTime : ""} 至 ${
              scope.row.endTime ? scope.row.endTime : ""
            }`
          }}
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-change"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="this.formInline.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="this.formInline.pageSize"
      layout="->, total, sizes, prev, pager, next, jumper"
      :total="formInline.total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { timeComparison } from "@/utils/timeConversion";
import { getRegionalReport, getRegionalReportExport } from "@/api/overview";
export default {
  data() {
    return {
      loading: false,
      formInline: {
        total: null,
        // 第几页
        pageNum: 1,
        // 多少条
        pageSize: 10,
        // 开始时间
        beginTime: null,
        // 结束时间
        endTime: null,
        // 大区
        districtIds: [],
        // 排序
        sorted: 0,
      },
      tableData: [],
    };
  },
  created() {
    // 开始时间
    this.formInline.beginTime = this.getTim().beginTime;
    // 结束时间
    this.formInline.endTime = this.getTim().endTime;
    this.getRegionalReportList();
  },
  methods: {
    // 点击了筛选
    changeTableSort(custom) {
      if (custom.order === "ascending") {
        this.formInline.sorted = 0;
        this.getRegionalReportList();
      } else if (custom.order === "descending") {
        this.formInline.sorted = 1;
        this.getRegionalReportList();
      } else {
        this.formInline.sorted = 0;
        this.getRegionalReportList();
      }
    },
    // 分页
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.getRegionalReportList();
    },
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.getRegionalReportList();
    },

    // 获取日期
    getTim() {
      let nowTime = {
        beginTime: "",
        endTime: "",
      };
      const date = new Date();
      //年
      const year = date.getFullYear();
      //月
      const month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      //日
      const day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      //时
      const hh = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      //分
      const mm =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      //秒
      const ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

      nowTime.beginTime = year + "-" + month + "-" + day;

      nowTime.endTime = year + "-" + month + "-" + day;
      return nowTime;
    },

    // 获取表格列表
    async getRegionalReportList() {
      this.loading = true;
      const query = {
        ...this.formInline,
        districtIds: this.formInline.districtIds.join(),
      };

      if (this.formInline.beginTime) {
        query.beginTime = `${this.formInline.beginTime} 00:00:00`;
      } else {
        query.beginTime = null;
      }
      if (this.formInline.endTime) {
        query.endTime = `${this.formInline.endTime} 23:59:59`;
      } else {
        query.endTime = null;
      }

      // const time = timeComparison("earching", query.beginTime, query.endTime);
      // if (!time) return (this.loading = false);

      const reslte = await getRegionalReport(query);
      this.tableData = reslte.rows;
      this.formInline.total = reslte.total;
      this.loading = false;
    },
    // 查询按钮
    onSubmit() {
      this.getRegionalReportList();
    },
    // 导出按钮
    onExport() {
      const query = {
        ...this.formInline,
        districtIds: this.formInline.districtIds.join(),
      };

      if (this.formInline.beginTime) {
        query.beginTime = `${this.formInline.beginTime} 00:00:00`;
      } else {
        query.beginTime = null;
      }
      if (this.formInline.endTime) {
        query.endTime = `${this.formInline.endTime} 23:59:59`;
      } else {
        query.endTime = null;
      }

      // const time = timeComparison("export", query.beginTime, query.endTime);
      // if (!time) return;

      this.$confirm("是否确认导出所有数据项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          getRegionalReportExport(query).then((res) => {
            this.downloadFile(res.msg);
            this.$message({
              type: "success",
              message: "导出成功",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消导出",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.pagination-change {
  margin-top: 20px;
}
</style>
